<script lang="ts" setup>
import type { DictType } from './data';

import { ref, watch } from 'vue';

import { VIcon } from '@croco/framework/icons';

import { service } from '#/api/request';
import { EditTable } from '#/components/edit-table';

import { useDataTemplate, useForm } from './data';

const props = withDefaults(
    defineProps<{
        dict: DictType;
        save: (data: any) => void;
    }>(),
    {},
);

const dictFormRef = ref();
const formLoading = ref(false);
const { dictDataTemplate } = useDataTemplate();
const { form, datasource, columns, rules, onSubmit } = useForm();

watch(
    () => props.dict,
    (dict: DictType) => {
        if (dict.type) {
            formLoading.value = true;
            service
                .get('/system/dict', { type: dict.type })
                .then(({ data }) => {
                    form.value = { ...dict };
                    datasource.value = data;
                })
                .catch(() => {
                    form.value = {};
                    datasource.value = [];
                })
                .finally(() => (formLoading.value = false));
        }
    },
    { deep: true },
);

// 保存菜单
const onSaveDict = () => {
    dictFormRef.value.validate((valid: any) => {
        if (valid) {
            props.save(form.value);
        }
    });
};
</script>

<template>
    <div style="height: 100%; display: flex; justify-content: center" v-if="!form.id">
        <el-empty :image-size="100" description="请选择左侧菜单后操作" />
    </div>
    <el-row v-else :gutter="40" v-loading="formLoading">
        <el-col :lg="24" style="min-height: 135px">
            <div style="display: flex; justify-content: space-between">
                <h2>编辑字典类型</h2>
                <div>
                    <el-button @click="() => dictFormRef.resetFields()">
                        <VIcon icon="icon:refresh-left" />
                        恢复默认
                    </el-button>
                    <el-button type="primary" v-auth="'system:dict:edit'" @click="onSaveDict()" />
                </div>
            </div>
            <el-form ref="dictFormRef" v-if="!formLoading" :model="form" :label-width="90" :rules="rules">
                <el-form-item prop="id" v-show="false">
                    <el-input v-model="form.id" />
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="form.name" clearable placeholder="字典名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型" prop="type">
                            <el-input v-model="form.type" clearable placeholder="字典类型" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
        <el-col :lg="24" style="height: calc(100% - 745px)">
            <h2>编辑字典数据</h2>
            <EditTable
                v-model="datasource"
                :columns="columns"
                :form-template="dictDataTemplate"
                :submit="onSubmit"
                :auth="{ insert: 'system:dict:add', update: 'system:dict:edit', remove: 'system:dict:remove' }"
                primary-key="id"
                placeholder="暂无匹配相关操作字典数据信息"
            >
                <template #isDefault="scope">
                    <el-select v-if="scope.row.editing" v-model="scope.row.isDefault" clearable>
                        <el-option label="是" value="Y" />
                        <el-option label="否" value="N" />
                    </el-select>
                    <span v-else-if="scope.row.isDefault"> {{ scope.row.isDefault === 'Y' ? '是' : '否' }}</span>
                </template>
                <template #type="scope">
                    <span>{{ scope.row.type }}</span>
                </template>
                <template #listClass="scope">
                    <el-select v-if="scope.row.editing" v-model="scope.row.listClass" clearable>
                        <el-option label="primary" value="primary">
                            <el-text type="primary">primary</el-text>
                        </el-option>
                        <el-option label="success" value="success">
                            <el-text type="success">success</el-text>
                        </el-option>
                        <el-option label="info" value="info">
                            <el-text type="info">info</el-text>
                        </el-option>
                        <el-option label="warning" value="warning">
                            <el-text type="warning">warning</el-text>
                        </el-option>
                        <el-option label="danger" value="danger">
                            <el-text type="danger">danger</el-text>
                        </el-option>
                    </el-select>
                    <span v-else>
                        <el-text v-if="scope.row.listClass" :type="scope.row.listClass" underline="never">{{ scope.row.listClass }}</el-text>
                    </span>
                </template>
            </EditTable>
        </el-col>
    </el-row>
</template>

<style scoped>
h2 {
    font-size: 18px;
    padding: 0 0 15px 0;
}
</style>
